<%--<%@ page language="java" contentType="text/html; charset=UTF-8"--%>
<%--         pageEncoding="UTF-8" %>--%>
<%--<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>--%>
<%--<!DOCTYPE html>--%>
<%--<html lang="en">--%>
<%--<head>--%>
<%--    <meta charset="UTF-8">--%>
<%--    <meta name="viewport" content="width=device-width, initial-scale=1.0">--%>
<%--    <title>用户管理</title>--%>
<%--    <link rel="stylesheet" href="styles.css"> <!-- 引用外部CSS文件 -->--%>
<%--    <style>--%>
<%--        /* 全局样式 */--%>
<%--        body {--%>
<%--            font-family: Arial, sans-serif;--%>
<%--            background-color: white;--%>
<%--            display: flex;--%>
<%--            justify-content: center;--%>
<%--            align-items: center;--%>
<%--            height: 100vh;--%>
<%--            margin: 0;--%>
<%--        }--%>
<%--        /* 新增.container-wrapper 样式 */--%>
<%--        .container-wrapper {--%>
<%--            display: flex;--%>
<%--            justify-content: center;--%>
<%--            align-items: center;--%>
<%--            flex-direction: column;--%>
<%--        }--%>

<%--        /* 更新.um-container 样式 */--%>
<%--        .um-container {--%>
<%--            background-color: #fff;--%>
<%--            padding: 20px;--%>
<%--            border-radius: 10px;--%>
<%--            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);--%>
<%--            width: 400px; /* 假设表单宽度为400px */--%>
<%--            text-align: center;--%>
<%--        }--%>

<%--        /* 数据表单样式 */--%>
<%--        .um-data-form table {--%>
<%--            width: 100%;--%>
<%--            border-collapse: collapse;--%>
<%--        }--%>

<%--        .um-data-form td {--%>
<%--            padding: 10px;--%>
<%--        }--%>

<%--        .um-data-form input[type="text"],--%>
<%--        .um-data-form input[type="number"],--%>
<%--        .um-data-form input[type="password"],--%>
<%--        .um-data-form input[type="date"],--%>
<%--        .um-data-form select {--%>
<%--            width: 100%;--%>
<%--            padding: 10px;--%>
<%--            margin-top: 0;--%>
<%--            border: 1px solid #ccc;--%>
<%--            border-radius: 5px;--%>
<%--            box-sizing: border-box;--%>
<%--        }--%>

<%--        .um-data-form input[type="radio"] {--%>
<%--            margin-right: 10px;--%>
<%--        }--%>

<%--        /* 按钮样式 */--%>
<%--        .um-btn {--%>
<%--            padding: 10px 20px;--%>
<%--            background-color: #007bff;--%>
<%--            color: #fff;--%>
<%--            border: none;--%>
<%--            border-radius: 5px;--%>
<%--            cursor: pointer;--%>
<%--        }--%>

<%--        .um-btn:hover {--%>
<%--            background-color: #0056b3;--%>
<%--        }--%>

<%--        /* 错误信息样式 */--%>
<%--        .um-error {--%>
<%--            color: red;--%>
<%--            margin-top: 10px;--%>
<%--        }--%>
<%--    </style>--%>
<%--</head>--%>
<%--<body>--%>
<%--<div class="container-wrapper">--%>
<%--    <div class="um-container">--%>
<%--        <div class="um-data-list">--%>
<%--        </div>--%>
<%--        <form method="post" action="man.action?action=zhuCe" onsubmit="return checkThis()">--%>
<%--            <div class="um-data-form">--%>
<%--                <table>--%>
<%--                    <tr>--%>
<%--                        <td><font color="red">*</font>学号：</td>--%>
<%--                        <td><input type="number" id="userAccount" name="userAccount" /></td>--%>
<%--                    </tr>--%>
<%--                    <tr>--%>
<%--                        <td><font color="red">*</font>姓名：</td>--%>
<%--                        <td><input type="text" id="userName" name="userName" /></td>--%>
<%--                    </tr>--%>
<%--                    <tr>--%>
<%--                        <td><font color="red">*</font>性别：</td>--%>
<%--                        <td>--%>
<%--                            <input type="radio" name="userSex" value="男" checked="checked"> 男--%>
<%--                            <input type="radio" name="userSex" value="女"> 女--%>
<%--                        </td>--%>
<%--                    </tr>--%>
<%--                    <tr>--%>
<%--                        <td><font color="red">*</font>出生日期：</td>--%>
<%--                        <td><input type="date" id="userBirthday" name="userBirthday" /></td>--%>
<%--                    </tr>--%>
<%--                    <tr>--%>
<%--                        <td><font color="red">*</font>身份证号码：</td>--%>
<%--                        <td><input type="text" id="userIdCard" name="userIdCard" /></td>--%>
<%--                    </tr>--%>
<%--                    <tr>--%>
<%--                        <td><font color="red">*</font>手机号码：</td>--%>
<%--                        <td><input type="number" id="userPhone" name="userPhone" /></td>--%>
<%--                    </tr>--%>
<%--                    <tr>--%>
<%--                        <td><font color="red">*</font>角色：</td>--%>
<%--                        <td>--%>
<%--                            <select id="userIdentify" name="userIdentify">--%>
<%--                                <option id="a" value="0">学生</option>--%>
<%--                                <option id="b" value="1">老师</option>--%>
<%--                            </select>--%>
<%--                        </td>--%>
<%--                    </tr>--%>
<%--                    <tr>--%>
<%--                        <td><font color="red">*</font>职务：</td>--%>
<%--                        <td><input type="text" id="nikeName" name="userOtherName" placeholder="某科老师/学生" /></td>--%>
<%--                    </tr>--%>
<%--                    <tr>--%>
<%--                        <td><font color="red">*</font>输入密码：</td>--%>
<%--                        <td><input type="password" id="userPassword" name="userPassword" /></td>--%>
<%--                    </tr>--%>
<%--                    <tr>--%>
<%--                        <td><font color="red">*</font>再次密码：</td>--%>
<%--                        <td><input type="password" id="rUserPassword" name="rUserPassword" /></td>--%>
<%--                    </tr>--%>
<%--                </table>--%>
<%--                <div>--%>
<%--                    <input type="submit" class="um-btn" value="保存"/>--%>
<%--                    <span id="error" class="um-error">${tip}</span>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--        </form>--%>
<%--    </div>--%>
<%--</div>--%>

<%--<script type="text/javascript">--%>
<%--    function checkThis() {--%>
<%--        let userName = document.getElementById("userName").value;--%>
<%--        let userIdCard = document.getElementById("userIdCard").value;--%>
<%--        let userBirthday = document.getElementById("userBirthday").value;--%>
<%--        let nikeName = document.getElementById("nikeName").value;--%>
<%--        let userPassword = document.getElementById("userPassword").value;--%>
<%--        let userPhone = document.getElementById("userPhone").value;--%>
<%--        let rUserPassword = document.getElementById("rUserPassword").value;--%>
<%--        if (!userName.trim()) {--%>
<%--            document.getElementById("error").innerHTML = "姓名不能为空";--%>
<%--            return false;--%>
<%--        }--%>

<%--        if (!userIdCard.trim()) {--%>
<%--            document.getElementById("error").innerHTML = "身份证号码不能为空";--%>
<%--            return false;--%>
<%--        }--%>

<%--        if (!userPhone.trim()) {--%>
<%--            document.getElementById("error").innerHTML = "手机号码不能为空";--%>
<%--            return false;--%>
<%--        }--%>

<%--        if (!nikeName.trim()) {--%>
<%--            document.getElementById("error").innerHTML = "职务不能为空";--%>
<%--            return false;--%>
<%--        }--%>

<%--        if (!userPassword.trim()) {--%>
<%--            document.getElementById("error").innerHTML = "密码不能为空";--%>
<%--            return false;--%>
<%--        }--%>

<%--        if (!rUserPassword.trim()) {--%>
<%--            document.getElementById("error").innerHTML = "确认密码不能为空";--%>
<%--            return false;--%>
<%--        }--%>
<%--        let reg1 = /^(^\d{18}$)|(^\d{17}(\d|X|x)$)$/;--%>
<%--        let reg2 = /^(^\d{11}$)$/;--%>
<%--        if (!reg1.test(userIdCard)) {--%>
<%--            alert("身份证输入不合法");--%>
<%--            return false;--%>
<%--        }--%>

<%--        if (!reg2.test(userPhone)) {--%>
<%--            alert("手机号输入不合法");--%>
<%--            return false;--%>
<%--        }--%>
<%--        if (rUserPassword!== userPassword) {--%>
<%--            document.getElementById("error").innerHTML = "两次密码不相同";--%>
<%--            return false;--%>
<%--        }--%>

<%--        // 提取身份证中的出生日期--%>
<%--        let birthDateFromIdCard = userIdCard.substr(6, 8); // 对于18位身份证--%>
<%--        // 如果身份证是15位，则使用 userIdCard.substr(6, 6) 并调整日期格式逻辑--%>
<%--        let birthYear = birthDateFromIdCard.substr(0, 4);--%>
<%--        let birthMonth = birthDateFromIdCard.substr(4, 2);--%>
<%--        let birthDay = birthDateFromIdCard.substr(6, 2);--%>
<%--        let idCardBirthday = birthYear + "-" + birthMonth + "-" + birthDay;--%>

<%--        // 比较日期--%>
<%--        if (userBirthday!== idCardBirthday) {--%>
<%--            document.getElementById("error").innerHTML = "身份证上的出生日期与输入的出生日期不一致";--%>
<%--            return false;--%>
<%--        }--%>

<%--        return true;--%>
<%--    }--%>
<%--</script>--%>
<%--</body>--%>
<%--</html>--%>



<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理</title>
    <link rel="stylesheet" href="styles.css"> <!-- 引用外部 CSS 文件 -->
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            background-color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        /* 新增.container-wrapper 样式 */
        .container-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        /* 更新.um-container 样式 */
        .um-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 400px; /* 假设表单宽度为 400px */
            text-align: center;
        }

        /* 数据表单样式 */
        .um-data-form table {
            width: 100%;
            border-collapse: collapse;
        }

        .um-data-form td {
            padding: 10px;
        }

        .um-data-form input[type="text"],
        .um-data-form input[type="number"],
        .um-data-form input[type="password"],
        .um-data-form input[type="date"],
        .um-data-form select {
            width: 100%;
            padding: 10px;
            margin-top: 0;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
        }

        .um-data-form input[type="radio"] {
            margin-right: 10px;
        }

        /* 按钮样式 */
        .um-btn {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .um-btn:hover {
            background-color: #0056b3;
        }

        /* 错误信息样式 */
        .um-error {
            color: red;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div class="container-wrapper">
    <div class="um-container">
        <div class="um-data-list">
        </div>
        <form method="post" action="man.action?action=zhuCe" onsubmit="return checkThis()">
            <div class="um-data-form">
                <table>
                    <tr>
                        <td><font color="red">*</font>学号：</td>
                        <td><input type="number" id="userAccount" name="userAccount" /></td>
                    </tr>
                    <tr>
                        <td><font color="red">*</font>姓名：</td>
                        <td><input type="text" id="userName" name="userName" /></td>
                    </tr>
                    <tr>
                        <td><font color="red">*</font>性别：</td>
                        <td>
                            <input type="radio" name="userSex" value="男" checked="checked"> 男
                            <input type="radio" name="userSex" value="女"> 女
                        </td>
                    </tr>
                    <tr>
                        <td><font color="red">*</font>出生日期：</td>
                        <td><input type="date" id="userBirthday" name="userBirthday" /></td>
                    </tr>
                    <tr>
                        <td><font color="red">*</font>身份证号码：</td>
                        <td><input type="text" id="userIdCard" name="userIdCard" /></td>
                    </tr>
                    <tr>
                        <td><font color="red">*</font>手机号码：</td>
                        <td><input type="number" id="userPhone" name="userPhone" /></td>
                    </tr>
                    <tr>
                        <td><font color="red">*</font>角色：</td>
                        <td>
                            <select id="userIdentify" name="userIdentify">
                                <option id="a" value="0">学生</option>
                                <option id="b" value="1">老师</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td><font color="red">*</font>职务：</td>
                        <td><input type="text" id="nikeName" name="userOtherName" placeholder="某科老师/学生" /></td>
                    </tr>
                    <tr>
                        <td><font color="red">*</font>输入密码：</td>
                        <td><input type="password" id="userPassword" name="userPassword" /></td>
                    </tr>
                    <tr>
                        <td><font color="red">*</font>再次密码：</td>
                        <td><input type="password" id="rUserPassword" name="rUserPassword" /></td>
                    </tr>
                </table>
                <div>
                    <input type="submit" class="um-btn" value="保存"/>
                    <span id="error" class="um-error">${tip}</span>
                </div>
            </div>
        </form>
        <!-- 添加超链接，假设首页为 index.jsp，可根据实际情况修改 -->
        <div style="margin-top: 20px;">
            <a href="index.jsp">返回首页</a>
        </div>
    </div>
</div>

<script type="text/javascript">
    function checkThis() {
        let userName = document.getElementById("userName").value;
        let userIdCard = document.getElementById("userIdCard").value;
        let userBirthday = document.getElementById("userBirthday").value;
        let nikeName = document.getElementById("nikeName").value;
        let userPassword = document.getElementById("userPassword").value;
        let userPhone = document.getElementById("userPhone").value;
        let rUserPassword = document.getElementById("rUserPassword").value;
        if (!userName.trim()) {
            document.getElementById("error").innerHTML = "姓名不能为空";
            return false;
        }

        if (!userIdCard.trim()) {
            document.getElementById("error").innerHTML = "身份证号码不能为空";
            return false;
        }

        if (!userPhone.trim()) {
            document.getElementById("error").innerHTML = "手机号码不能为空";
            return false;
        }

        if (!nikeName.trim()) {
            document.getElementById("error").innerHTML = "职务不能为空";
            return false;
        }

        if (!userPassword.trim()) {
            document.getElementById("error").innerHTML = "密码不能为空";
            return false;
        }

        if (!rUserPassword.trim()) {
            document.getElementById("error").innerHTML = "确认密码不能为空";
            return false;
        }
        let reg1 = /^(^\d{18}$)|(^\d{17}(\d|X|x)$)$/;
        let reg2 = /^(^\d{11}$)$/;
        if (!reg1.test(userIdCard)) {
            alert("身份证输入不合法");
            return false;
        }

        if (!reg2.test(userPhone)) {
            alert("手机号输入不合法");
            return false;
        }
        if (rUserPassword!== userPassword) {
            document.getElementById("error").innerHTML = "两次密码不相同";
            return false;
        }

        // 提取身份证中的出生日期
        let birthDateFromIdCard = userIdCard.substr(6, 8); // 对于 18 位身份证
        // 如果身份证是 15 位，则使用 userIdCard.substr(6, 6) 并调整日期格式逻辑
        let birthYear = birthDateFromIdCard.substr(0, 4);
        let birthMonth = birthDateFromIdCard.substr(4, 2);
        let birthDay = birthDateFromIdCard.substr(6, 2);
        let idCardBirthday = birthYear + "-" + birthMonth + "-" + birthDay;

        // 比较日期
        if (userBirthday!== idCardBirthday) {
            document.getElementById("error").innerHTML = "身份证上的出生日期与输入的出生日期不一致";
            return false;
        }

        return true;
    }
</script>
</body>
</html>